Цикл for...of — перебор значений итерируемых объектов

Цикл for...of — это современный способ перебора значений в итерируемых объектах. Он предназначен для доступа к данным, а не к их ключам.

Синтаксис

for (значение of итерируемый_объект) {
  // тело цикла
}

Примеры

Перебор массива

const colors = ["красный", "зелёный", "синий"];

for (let color of colors) {
  console.log(color);
}

Вывод:

красный
зелёный
синий

Здесь color — это значение элемента, а не индекс.

Перебор строки

const text = "Привет";

for (let char of text) {
  console.log(char);
}

Вывод:

П
р
и
в
е
т

Каждая итерация возвращает один символ.

Перебор Map

const settings = new Map([
  ["theme", "dark"],
  ["lang", "ru"],
  ["notifications", true]
]);

for (let value of settings) {
  console.log(value); // ["theme", "dark"], ["lang", "ru"], ["notifications", true]
}

// Если нужно отдельно ключ и значение:
for (let [key, value] of settings) {
  console.log(key + ": " + value);
}

Вывод:

theme: dark
lang: ru
notifications: true

Перебор Set

const tags = new Set(["javascript", "react", "mobile"]);

for (let tag of tags) {
  console.log(tag);
}

Вывод:

javascript
react
mobile

Отличие от for...in

Характеристика for...of for...in
Что возвращает Значения Ключи (имена свойств)
Работает с массивами ✅ Да, правильно ❌ Не рекомендуется
Работает со строками ✅ Да ✅ Да, но возвращает индексы
Работает с Map, Set ✅ Да ❌ Нет (перебирает ключи как строки)
Учитывает порядок ✅ Да ❌ Нет гарантии
Перебирает наследуемые свойства ❌ Нет ✅ Да

Правило

Используйте for...of, когда нужно перебрать значения — массивы, строки, Map, Set, NodeList и другие итерируемые структуры.
Это безопасно, понятно и работает предсказуемо.